<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <!-- 
        v-text 会将变量的值当做纯文本来渲染 不会解析标签
        v-html 会解析html标签 工作用经常用来渲染富文本
        v-if v-else 逻辑判断指令 可以用来控制dom的删除和创建
        v-show 通过css样式 控制元素的显示和隐藏
        v-bind 是一个绑定指令可以绑定标签的所有属性 包括自定义属性 v-bind可以缩写 使用的使用直接用:attr 省略v-bind
        v-model 是一个数据双向绑定的指令 使用在input标签上的时候其实就是v-bind 和 input事件的集合
        使用在select标签上的时候相当于 v-bind 和 change事件的集合
        v-on 绑定事件的方法 可以绑定所有的事件（键盘事件 鼠标事件 表单事件）v-on可以缩写为@
        修饰符： stop 阻止冒泡 prevent阻止默认事件 native原生事件 self绑定给元素自己的事件 once一次性事件
        修饰符在使用的时候可以串联 会按照串联的先后顺序执行修饰符的功能
        v-pre 跳过编译过程
        v-cloak 数据解析完成之后才会渲染内容
        v-once 绑定该指令的dom或者组件只会编译一次
        v-for 
     -->
     <div id="app">
         <!-- <div v-text="content"></div>
         <div v-html="content"></div> -->
         <!-- <div v-if="flag">这是要显示的内容</div>
         <div v-else>这是else要显示的内容</div> -->
         <!-- <div v-show="flag">这是show要显示的内容</div> -->
         <!-- <div v-bind:title="str">英雄联盟</div> -->
         <!-- <input type="text" v-model="str">
         <p>{{str}}</p> -->
         <!-- <div @click="fun2">
            <button v-on:click.stop.prevent="fun">点击</button>
         </div> -->
         <!-- <div v-pre>{{str}}</div> -->
         <!-- <div v-cloak>{{str}}</div> -->
         <ul>
             <!-- for循环字符串 第一个参数表示字符串的每一个字符 第二个字符的索引值 -->
            <!-- <li v-for="(item, i) in str">{{i + 1}}、 {{item}}</li> -->
            <!-- <li v-for="(item, i) in arr">{{i + 1}}、{{item.name}}</li> -->
            <!-- for循环对象有三个参数第一个键值对的值 第二个是键值对的键 第三个是索引值 -->
            <!-- <li v-for="(value, key, i) in obj">{{i + 1}}、{{key}} {{value}}</li> -->
         </ul>
     </div>
     <script src="./vue.js"></script>
     <script>
        new Vue({
            el: '#app',
            data: {
                content: '<mark>这是一个标记</mark>',
                flag: true,
                str: '德玛西亚',

                arr: [
                    {
                        name: '三国演义'
                    },
                    {
                        name: '西游记'
                    },
                    {
                        name: '笑面人'
                    },
                    {
                        name: '水浒传'
                    }
                ],

                obj:{
                    '王豪': 110,
                    '孙凡博': 120,
                    '杨克强': 119
                }
            },
            methods: {
                fun() {
                    console.log('btn')
                },

                fun2() {
                    console.log('div')
                }
            },
        })
     </script>
</body>
</html>